<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        总价：{{total}}
        <show v-on:show="alltotal"></show>
        <show v-on:show="alltotal"></show>
    </div>
    <script src="../js/vue.js"></script>
    <script>
            // Vue.component("show",{
            //   template:`
            //   <div>
            //     <button @click="add">{{count}}</button>
            //     </div>`,
            //     data(){
            //         return{
            //             count:0
            //         }
            //     },
            //     methods:{
            //         add(){
            //             this.count++;
            //             //触发父组件
            //             this.$emit("show")
            //         }
            //     }
            // })
            // new Vue({
            //     el:"#app",
            //     data:{
            //         total:0
            //     },
            //     methods:{
            //         //接受子组件穿的值
            //         alltotal(){
            //             this.total+=1
            //         }
            //     }
            // })
            Vue.component("show",{
                template:`
                        <div>
                           <button @click="add">{{count}}</button> 
                            </div>
                `,
                data(){
                    return{
                        count:0
                    }
                },
                methods:{
                    add(){
                        this.count++;
                        //触发父组件
                       this.$emit("show")
                    }
                }
            })
            new Vue({
                el:"#app",
                data:{
                    total:0
                },
                methods:{
                    alltotal(){
                        this.total+=1
                    }
                }
            })
    </script>
</body>
</html>